<template>
  <div style="display: inline-block ; margin-right: 16px">
    <el-cascader clearable :options="options" :props="{ checkStrictly: true }" placeholder="管理机构" v-model="list" @change="slectData" ref="deptIdCascader" style="width: 100%;"></el-cascader>
    <!--  style="width: 220px" -->
  </div>
</template>

<script>
import { treeSelect } from "@/api/communityOperating/drainageLink";
export default {
  name: "MechanismCascader",
  props: {
    deptId: {
      type: Number,
      default: null,
    },
    // query: Object,
  },
  watch: {
    list() {
      if (this.$refs.deptIdCascader) {
        this.$refs.deptIdCascader.dropDownVisible = false
      }
    },
    deptId(newValue) {
      if (!newValue) {
        this.list = []
      }
    },
  },
  data() {
    return {
      options: [],
      list: [],
    };
  },

  mounted() {
    this.treeSelect();
    let deptIdCascader = this.$refs.deptIdCascader
    let updatePopper = deptIdCascader.updatePopper
    // 重写 updatePopper 方法，在执行组件 updatePopper 方法之前，重置 el-cascader__dropdown 组件的 top
    let fn = () => {
      this.changeTop()
      updatePopper();
    }
    deptIdCascader.updatePopper = fn
  },
  methods: {
    changeTop() {
      let doms = [...this.$refs.deptIdCascader.$el.getElementsByClassName('el-cascader__dropdown')]
      doms.forEach(dom => dom.style.top = "0")
      // doms.forEach(dom => console.log('999', dom.style.top))
    },
    treeSelect() {
      treeSelect().then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },
    slectData(e) {
      this.list = e;
      let len = e.length;
      if (e.length) {
        len = len - 1;
      }
      this.$emit("update:deptId", e[len]);
    },
  },
};
</script>

<style lang="scss" scoped></style>
